<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div class="edit-mission">
			<div class="clearfloat">
				<div class="tree_list">
					<p class="panel_title">{{$t('message.deviceList')}}</p>
					<el-tree :data="deviceDatas" ref="tree" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" node-key="keyid"></el-tree>
				</div>
				<div class="container">
					<el-tabs type="border-card">
						<el-tab-pane style="height: 512px; max-height: 550px;overflow-y: auto">
							<span slot="label"><i class="el-icon-eleg-icon_document"></i> 设置显示文本</span>
							<div style="width: 100%">
								<el-button type="primary" size="small" @click="saveTextSubmit">
									<i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存
								</el-button>
							</div>
							<div style="width: 100%;padding-top: 15px">
								<el-form id="form" ref="setTextForm" :model="setTextForm" :rules="setTextRules" label-width="130px">
									<el-form-item label="显示文本" prop="text" required>
										<el-input type="textarea" :rows="3" v-model="setTextForm.text" style="width: 90%"></el-input>
									</el-form-item>
									<el-form-item label="LED点阵(宽*高)" required>
										<el-select v-model="setTextForm.led" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in ledDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
							</div>
						</el-tab-pane>
						<el-tab-pane style="height: 512px; max-height: 550px;overflow-y: auto">
							<span slot="label"><i class="el-icon-eleg-icon_clock"></i> 设置倒计时</span>
							<div style="width: 100%">
								<el-button type="primary" size="small" @click="saveCountDown">
									<i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存
								</el-button>
							</div>
							<div style="width: 100%;padding-top: 15px">
								<el-form id="form" ref="setCountDownForm" :model="setCountDownForm" :rules="setCountDownRules" label-width="130px">
									<el-form-item label="日期格式" prop="showformat" required>
										<el-select v-model="setCountDownForm.showformat" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in showFormatDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="结束时间" prop="endtime" required>
										<el-date-picker style="width: 90%" v-model="setCountDownForm.endtime" type="datetime" placeholder="选择日期时间">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="是否显示" required>
										<el-checkbox v-model="setCountDownForm.showday">日</el-checkbox>
										<el-checkbox v-model="setCountDownForm.showhour">时</el-checkbox>
										<el-checkbox v-model="setCountDownForm.showminute">分</el-checkbox>
										<el-checkbox v-model="setCountDownForm.showsecond">秒</el-checkbox>
									</el-form-item>
									<el-form-item label="显示文本" prop="showstring">
										<el-input style="width: 90%" type="textarea" :rows="2" v-model="setCountDownForm.showstring"></el-input>
									</el-form-item>
									<el-form-item label="多行显示" prop="mutlelineshow" required>
										<el-radio-group v-model="setCountDownForm.mutlelineshow">
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="LED点阵(宽*高)" required>
										<el-select v-model="setCountDownForm.led" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in ledDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
							</div>
						</el-tab-pane>
						<el-tab-pane style="height: 512px; max-height: 550px;overflow-y: auto">
							<span slot="label"><i class="el-icon-setting"></i> 设置时间显示</span>
							<div style="width: 100%">
								<el-button type="primary" size="small" @click="saveDigitalSubmit">
									<i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存
								</el-button>
							</div>
							<div style="width: 100%;padding-top: 15px;">
								<el-form id="form" ref="setDigitalForm" :model="setDigitalForm" label-width="130px" :rules="setDigitalRules">
									<el-form-item label="时差类型" prop="timelagtype" required>
										<el-radio-group v-model="setDigitalForm.timelagtype">
											<el-radio :label="0">超前</el-radio>
											<el-radio :label="1">滞后</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="日期格式" prop="dateformat" required>
										<el-select v-model="setDigitalForm.dateformat" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in dateFormateDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="星期格式" prop="timeformat" required>
										<el-select v-model="setDigitalForm.weekformat" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in weekFormateDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="时间格式" prop="weekformat" required>
										<el-select v-model="setDigitalForm.timeformat" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in timeFormateDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="是否显示" required>
										<el-checkbox v-model="setDigitalForm.showyear">年</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showmonth">月</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showday">日</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showweek">星期</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showhour">时</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showminute">分</el-checkbox>
										<el-checkbox v-model="setDigitalForm.showsecond">秒</el-checkbox>
									</el-form-item>
									<el-form-item label="显示文本" prop="showstring">
										<el-input type="textarea" :rows="2" style="width: 90%" v-model="setDigitalForm.showstring"></el-input>
									</el-form-item>
									<el-form-item label="多行显示" prop="mutlelineshow" required>
										<el-radio-group v-model="setDigitalForm.mutlelineshow">
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="LED点阵(宽*高)" required>
										<el-select v-model="setDigitalForm.led" :placeholder="$t('message.selectModeAlert')" style="width: 90%">
											<el-option v-for="item in ledDatas" :key="item.value" :label="item.name" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
							</div>
						</el-tab-pane>
						<el-tab-pane style="height: 512px; max-height: 550px;overflow-y: auto">
							<span slot="label"><i class="el-icon-eleg-icon_clock"></i>校验时间</span>
							<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
								<el-button type="primary" size="lager" @click="checkTime">
									<i class="el-icon-eleg-icon_drive el-icon--left"></i>开 始 校 验
								</el-button>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import headerNave from '../../../../components/headerNave'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	var date = new Date();
	export default {
		components: {
			headerNave,
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(), //hour 
					"m+": this.getMinutes(), //minute 
					"s+": this.getSeconds(), //second 
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				deviceDatas: [],
				props: {
					children: 'Children',
					label: 'name',
					id: 'keyid'
				},
				ledDatas: [{
						name: '128*16',
						value: 0
					},
					{
						name: '198*16',
						value: 1
					},
				],
				//设置显示文字
				setTextForm: {
					text: '',
					led: 0
				},
				setTextRules: {
					text: [{
						required: true,
						message: '请输入显示文本',
						trigger: 'blur'
					}]
				},
				//设置倒计时
				showFormatDatas: [{
						name: 'xx天xx时xx分xx秒',
						value: 0
					},
					{
						name: 'xx天xx時xx分xx秒',
						value: 1
					},
					{
						name: 'xxDayxxHourxxMinxxSec',
						value: 2
					},
					{
						name: 'XXdXXhXXmXXs',
						value: 3
					},
					{
						name: 'xx:xx:xx:xx',
						value: 4
					}
				],
				setCountDownForm: {
					showformat: 0,
					endtime: new Date(date.getTime()).format('yyyy-MM-dd hh:mm:ss'),
					showday: true,
					showhour: true,
					showminute: true,
					showsecond: true,
					showstring: "",
					mutlelineshow: 0,
					led: 0
				},
				//设置时间显示区域
				dateFormateDatas: [{
						name: 'YYYY年MM月DD日',
						value: 0
					},
					{
						name: 'YY年MM月DD日',
						value: 1
					},
					{
						name: 'MM/DD/YYYY',
						value: 2
					},
					{
						name: 'YYYY/MM/DD',
						value: 3
					},
					{
						name: 'YYYY-MM-DD',
						value: 4
					},
					{
						name: 'YYYY.MM.DD',
						value: 5
					},
					{
						name: 'MM.DD.YYYY',
						value: 6
					},
					{
						name: 'DD.MM.YYYY',
						value: 7
					}
				],
				weekFormateDatas: [{
						name: '星期X',
						value: 0
					},
					{
						name: 'Monday',
						value: 1
					},
					{
						name: 'Mon.',
						value: 2
					},
				],
				timeFormateDatas: [{
						name: 'HH时mm分ss秒',
						value: 0
					},
					{
						name: 'HH時mm分ss秒',
						value: 1
					},
					{
						name: 'HH:mm:ss',
						value: 2
					},
					{
						name: '上午 HH:mm:ss',
						value: 3
					},
					{
						name: 'AM HH:mm:ss',
						value: 4
					},
					{
						name: 'HH:mm:ss 上午',
						value: 5
					},
					{
						name: 'HH:mm:ss AM',
						value: 6
					},
				],
				setDigitalForm: {
					timelagtype: 0,
					hournum: 0,
					minitenum: 0,
					dateformat: 0,
					weekformat: 0,
					timeformat: 0,
					showyear: true,
					showmonth: true,
					showweek: true,
					showday: true,
					showhour: true,
					showminute: true,
					showsecond: true,
					showstring: "",
					mutlelineshow: 0,
					led: 0
				}
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			checkTime() {
				if(this.deleteFromArray(this.$refs.tree.getCheckedNodes()).length === 0) {
					this.$notify.warning({
						title: '提示',
						message: '请选择设备',
						duration: 2500
					});
					return
				}
				HttpServer.httpPost.call(this, '/Api/LedResource/AdjustTime', {
					sn: this.deleteFromArray(this.$refs.tree.getCheckedNodes())
				}, response => {}, response => {
					if(response.data.code === 0) {
						this.$notify({
							title: '成功',
							message: this.$t('message.saveSuccess'),
							type: 'success',
							duration: 2500
						});
					} else if(response.data.code === 10001) {
						this.$notify({
							title: '提示',
							message: response.data.msg,
							type: 'warning',
							duration: 2500
						});
					} else{
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//删除数组元素
			deleteFromArray(array) {
				var arr = [];
				for(var i = 0; i < array.length; i++) {
					if(array[i].Children) {
						array.splice(i, 1);
					}
				}
				array.forEach(function(item) {
					arr.push(item.sn)
				})
				return arr;
			},
			//处理led点阵数据，获取宽和高 --设置显示文本
			formateTextLed() {
				var arr = [],
					str = "",
					that = this;
				this.ledDatas.forEach(function(item) {
					if(item.value === that.setTextForm.led) {
						str = item.name;
					}
				})
				arr = str.split("*");
				return arr;
			},
			//处理led点阵数据，获取宽和高 --设置倒计时
			formateCountDownLed() {
				var arr = [],
					str = "",
					that = this;
				this.ledDatas.forEach(function(item) {
					if(item.value === that.setCountDownForm.led) {
						str = item.name;
					}
				})
				arr = str.split("*");
				return arr;
			},
			//处理led点阵数据，获取宽和高 --设置时间显示区域
			formateDigitalLed() {
				var arr = [],
					str = "",
					that = this;
				this.ledDatas.forEach(function(item) {
					if(item.value === that.setDigitalForm.led) {
						str = item.name;
					}
				})
				arr = str.split("*");
				return arr;
			},
			//保存设置显示文本
			saveTextSubmit() {
				if(this.deleteFromArray(this.$refs.tree.getCheckedNodes()).length === 0) {
					this.$notify.warning({
						title: '提示',
						message: '请选择设备',
						duration: 2500
					});
				} else {
					this.$refs['setTextForm'].validate((valid) => {
						if(valid) {
							this.loading = true;
							var param = {
								text: this.setTextForm.text,
								ledwidth: parseInt(this.formateTextLed()[0]),
								ledheight: parseInt(this.formateTextLed()[1]),
								sn: this.deleteFromArray(this.$refs.tree.getCheckedNodes())
							}
							HttpServer.httpPost.call(this, '/Api/LedResource/SetLEDText', param, function(response) {}, function(response) {
								this.loading = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							})
						} else {
							return false;
						}
					});
				}
			},
			//保存倒计时设置
			saveCountDown() {
				if(this.deleteFromArray(this.$refs.tree.getCheckedNodes()).length === 0) {
					this.$notify.warning({
						title: '提示',
						message: '请选择设备',
						duration: 2500
					});
				} else {
					this.$refs['setCountDownForm'].validate((valid) => {
						if(valid) {
							this.loading = true;
							var param = {
								showformat: this.setCountDownForm.showformat,
								year: new Date(this.setCountDownForm.endtime).getFullYear(),
								month: new Date(this.setCountDownForm.endtime).getMonth() + 1,
								day: new Date(this.setCountDownForm.endtime).getDate(),
								hour: new Date(this.setCountDownForm.endtime).getHours(),
								minute: new Date(this.setCountDownForm.endtime).getMinutes(),
								second: new Date(this.setCountDownForm.endtime).getSeconds(),
								showday: this.setCountDownForm.showday ? 1 : 0,
								showhour: this.setCountDownForm.showhour ? 1 : 0,
								showminute: this.setCountDownForm.showminute ? 1 : 0,
								showsecond: this.setCountDownForm.showsecond ? 1 : 0,
								showstring: this.setCountDownForm.showstring,
								mutlelineshow: this.setCountDownForm.mutlelineshow,
								ledwidth: parseInt(this.formateCountDownLed()[0]),
								ledheight: parseInt(this.formateCountDownLed()[1]),
								sn: this.deleteFromArray(this.$refs.tree.getCheckedNodes())
							}
							HttpServer.httpPost.call(this, '/Api/LedResource/SetCountdown', param, function(response) {}, function(response) {
								this.loading = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							})
						} else {
							return false;
						}
					});
				}
			},
			//保存时间显示区域
			saveDigitalSubmit() {
				if(this.deleteFromArray(this.$refs.tree.getCheckedNodes()).length === 0) {
					this.$notify.warning({
						title: '提示',
						message: '请选择设备',
						duration: 2500
					});
				} else {
					this.$refs['setDigitalForm'].validate((valid) => {
						if(valid) {
							this.loading = true;
							var param = {
								timelagtype: this.setDigitalForm.timelagtype,
								hournum: this.setDigitalForm.hournum,
								minitenum: this.setDigitalForm.minitenum,
								dateformat: this.setDigitalForm.dateformat,
								weekformat: this.setDigitalForm.weekformat,
								timeformat: this.setDigitalForm.timeformat,
								showyear: this.setDigitalForm.showyear ? 1 : 0,
								showmonth: this.setDigitalForm.showmonth ? 1 : 0,
								showweek: this.setDigitalForm.showweek ? 1 : 0,
								showday: this.setDigitalForm.showday ? 1 : 0,
								showhour: this.setDigitalForm.showhour ? 1 : 0,
								showminute: this.setDigitalForm.showminute ? 1 : 0,
								showsecond: this.setDigitalForm.showsecond ? 1 : 0,
								showstring: this.setDigitalForm.showstring,
								mutlelineshow: this.setDigitalForm.mutlelineshow,
								ledwidth: parseInt(this.formateDigitalLed()[0]),
								ledheight: parseInt(this.formateDigitalLed()[1]),
								sn: this.deleteFromArray(this.$refs.tree.getCheckedNodes())
							}
							HttpServer.httpPost.call(this, '/Api/LedResource/SetDigitalClock', param, function(response) {}, function(response) {
								this.loading = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							})
						} else {
							return false;
						}
					});
				}
			},
			//查询设备  包括多媒体智能终端和智能微图
			getDeviceDatas() {
				//查找中控设备
				HttpServer.httpPost.call(this, '/Api/Device/Info', {
					category: ['MultimediaIT']
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						var multimediaITDatas = {
							name: '多媒体智能终端',
							keyid: 0,
							Children: response.data.deviceinfo
						}
						//查找微图设备
						HttpServer.httpPost.call(this, '/Api/Device/Info', {
							category: ['WeiTu']
						}, function(resp) {}, function(resp) {
							var weiTuDatas = {
								name: '智能微图',
								keyid: -1,
								Children: resp.data.deviceinfo
							}
							this.deviceDatas = [multimediaITDatas, weiTuDatas];
						})
					}
				});
			}
		},
		created() {
			this.getDeviceDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style lang="less">
	.tree_list {
		.el-tree {
			overflow: auto;
		}
		.el-tree-node__expand-icon {
			display: none;
		}
		.el-checkbox {
			margin-left: 10px;
		}
	}
	
	.edit-mission {
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 556px;
			max-height: 570px;
		}
	}
	
	.upload-section {
		>div {
			min-width: 480px;
		}
	}
</style>
<style scoped lang="less">
	.tree_list {
		width: 220px;
		float: left;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		>div {
			width: 100%;
			height: 100%;
		}
	}
	
	.container {
		width: e("calc(100% - 230px)");
		float: right;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		.form-section {
			text-align: center;
			border: 1px solid #d3dce6;
			height: 100%;
			margin-left: 10px;
			overflow-y: auto;
			form {
				margin: 20px;
			}
		}
	}
	
	.el-tree-node__expand-icon.is-leaf {
		width: 10px;
		margin: 0;
	}
</style>